// app/layout.tsx

"use client"; // 声明为客户端组件

import localFont from "next/font/local";
import "./globals.css";
import ThemeToggle from './components/ThemeToggle';
import HeaderAndNav from './components/HeaderAndNav';
import { useState, createContext, useContext } from 'react';

const geistSans = localFont({
  src: "./fonts/GeistVF.woff",
  variable: "--font-geist-sans",
  weight: "100 900",
});
const geistMono = localFont({
  src: "./fonts/GeistMonoVF.woff",
  variable: "--font-geist-mono",
  weight: "100 900",
});

// 创建 ThemeContext
const ThemeContext = createContext();

// 导出 useTheme 钩子
export const useTheme = () => {
  return useContext(ThemeContext); // 确保通过 useContext 获取 ThemeContext 的值
};

export default function RootLayout({ children }: { children: React.ReactNode }) {
  const [theme, setTheme] = useState('dark');

  return (
      <html lang="en">
      <body
          className={`${geistSans.variable} ${geistMono.variable} antialiased min-h-screen ${theme === 'dark' ? 'bg-black text-white' : 'bg-gray-100 text-black'}`}
      >
      {/* 提供 ThemeContext 值 */}
      <ThemeContext.Provider value={{ theme, setTheme }}>
        <ThemeToggle theme={theme} onThemeChange={setTheme} />
        <HeaderAndNav theme={theme} />
        {children}
      </ThemeContext.Provider>
      </body>
      </html>
  );
}
